<!doctype html>
<html>
	<head>
		<meta charset="utf-8">
		<title>TestEdge</title>
		<link rel="stylesheet" type="text/css" href="/ce-static-testedge/common/css/jquery.loader.css" />
		<link rel="stylesheet" type="text/css" href="/ce-static-testedge/common/css/jquery-ui.css" />
		<link rel="stylesheet" type="text/css" href="/ce-static-testedge/common/css/style_testEdge.css" />
		<link rel="stylesheet" type="text/css" href="/ce-static-testedge/common/css/style_testEdge_custom.css" />
		<link rel="stylesheet" type="text/css" href="/ce-static-testedge/common/css/jquery.jscrollpane.css" />
		<script type="text/javascript" src="/ce-static-testedge/common/jscripts/head.load.min.js"></script>

		<!-- <script type="application/javascript" src="/ce-static-testedge/common/jscripts/datecontroller.js"></script> -->
		<!-- <script type="text/javascript" src="/ce-static-testedge/common/jscripts/jquery-ui-timepicker-addon.js"></script> -->
		<!--[if IE]>
		<link rel="stylesheet" type="text/css" href="/ce-static-testedge/css/ui-testedge/style_IE.css" />
		<script type="text/javascript" src="/ce-static-testedge/jscripts/jquery.placeholder.min.js"></script>
		<script>
		$(function() {
		$('input, textarea').placeholder();
		});
		</script>
		<![endif]-->
		<!--[if IE 8]>
		<link rel="stylesheet" type="text/css" href="/ce-static-testedge/css/ui-testedge/style_IE_8.css" />
		<![endif]-->
	</head>
	<body>
		<!--BO Main Content -->
		<div class="contentWrapper">
			<div class="wrapper">
				<div class="testEdgeMainContent"  >
					<div id="sectionTitleDiv">
						<h1 class="titleMain" style="margin-bottom: -24px"><span data-bind="text:sectionTitle" class="floatleft">Pre-Primary (2013-2014) local</span><a href="#." onclick="showHelp(event)" style="margin-top: 10px; margin-right: 13px" class="iconHelp seletc floatright"></a></h1>
						<div  class="help" ></div>
						<a class="floatright" href="#" style="margin-right: 10px; font-size: 13px;" onclick="retrunToAcademicYear(event)"> &lt; Back to Academic Year</a>
					</div>
					<!--BO Added Facilities -->
					<div class="container" id="myAYPTabContainer">
						<div class="aypTabs" id="AYPmainTAB">
							<ul>
								<li>
									<a href="#tabs-1">Timings</a>
								</li>
								<li>
									<a href="#tabs-2">Shifts</a>
								</li>
								<li>
									<a href="#tabs-3">Terms &amp; Assessments</a>
								</li>
								<li>
									<a href="#tabs-4">Subjects</a>
								</li>
								<li>
									<a href="#tabs-5">Class Rooms &amp; Teachers</a>
								</li>
								<li>
									<a href="#tabs-6">Shared CE Rooms</a>
								</li>
							</ul>
							<div id="tabs-1">
								<div class="scroll-pane2">
									<div class="eventWrap">
										<!-- ko if: isEditMode -->
										<div class="floatright">
											<a href="#." class="te-button buttonFacilities addSchedule" data-bind="click: createItem">Add Schedule</a>
										</div>
										<!-- /ko -->
										<div class="clearBoth"></div>
										<!-- ko if: scheduleList().length -->
										<table border="1" class="schoolEventstable">
											<thead>
												<tr class="border-bottom">
													<th class="header" style="width:150px;">Schedule</th>
													<th class="header" style="width:180px;">Days of the week</th>
													<th class="header" style="width:180px;">Exceptions</th>
													<th class="header" style="width:80px;">Periods</th>
													<th class="header" style="width:70px;">Breaks</th>
													<th class="header" style="width:140px;">Star/Study Period</th>
													<th class="header" style="width:210px;"></th>
													<!-- <th class="header"></th> -->
												</tr>
											</thead>
											<tbody data-bind="template: { name: 'schedule-template', templatePrefix: 'schedule/', foreach: scheduleList, as:'schedule' }"></tbody>
										</table>
										<!-- /ko -->
									</div>
									<div class="tabContentExistMessage">
										<!-- ko if: scheduleList().length <1 && isEditMode-->
										<p>
											No Schedule added. To Add Schedule, click on the Add Schedule Button.
										</p>
										<!-- /ko -->
									</div>
								</div>
								<div id="dialog-confirmScheduleDelete" title="Delete" data-bind=" with: itemForDelete, deleteDialog:{}">
									<div class="sectionContainer">
										<p data-bind="text: confirmationText" ></p>
									</div>
									<div class="bottomButton">
										<a href="#" class="te-button buttonBlue floatleft" id="delete" data-bind="click:  deleteItem">Delete</a>
										<a href="#" class="te-button buttonGray floatleft" id="cencel" data-bind="click:  cancelItem">Cancel</a>
										<div class="clearBoth"></div>
									</div>
								</div>
								<div id="dialog-Errors-Tab1" data-bind="dialog: {width:'300', modal : 'true', 'autoOpen': false, 'title': errorTitle}, dialogVisible: isErrorDialogOpen" title="">
									<div class="sectionContainer">
										<p data-bind="text: errorDesc" align="middle">
											Some Fields are not yet filled!
										</p>
									</div>
									<div class="bottomButton">
										<a data-bind="click: closeErrorDialog" href="#" class="te-button buttonBlue floatleft">Close</a>
										<div class="clearBoth"></div>
									</div>
								</div>
								<!-- Add Schedule Dialog -->
								<div id="add-Schedule" class="addSch" title="Schedule" data-bind="scheduleDialog:{}" >
									<div class="sectionContainer">
										<div id="ScheduleData" class="scroll-pane">
											<div  data-bind="with: itemForEditing" >
												<ul class="scheduleData">
													<li>
														<label>Name your schedule</label>
														<input maxlength="75" type="text" class="width256" placeholder="Enter Schedule Name" data-bind="value: scheduleTitle"/>
													</li>
													<li>
														<div class="floatleft spacing">
															<label>Timings</label>
															<input class="floatleft width20" type="spinner" data-bind="spinner: startTiming.hour, spinnerOptions: { min: 00,max: 23,numberFormat : 'd2' }" />
															<input class="floatleft width20" type="spinner" data-bind="spinner: startTiming.minute, spinnerOptions: { min: 00,max: 59,numberFormat : 'd2' }" />
															<label class="floatleft to">Hours</label>
															<!-- <div data-bind="text: startTiming">startTiming</div> -->
															<label class="floatleft to">to</label>
															<input class="floatleft width20" type="spinner" data-bind="spinner: endTiming.hour, spinnerOptions: { min: 00,max: 23,numberFormat : 'd2' }" />
															<input class="floatleft width20" type="spinner" data-bind="spinner: endTiming.minute, spinnerOptions: { min: 00,max: 59,numberFormat : 'd2' }" />
															<label class="floatleft to">Hours</label>
														</div>
														<div class="clearBoth"></div>
													</li>
													<li>
														<div >
															<label>Applicable days</label>
															<div class="floatleft">
																<ul class="checkBoxMaster" data-bind="template:{name:'day-template', templatePrefix: 'schedule/', foreach:weekDays}"></ul>
															</div>
														</div>
														<div class="clearBoth"></div>
													</li>
												</ul>
												<div class="clearBoth"></div>
												<!-- BO Exceptions +++++++++++++++++++++++++++++++++++++++++++++++ -->
												<label style="font-weight: bold">Exceptions</label>
												<!-- ko if: weekExceptions().length > 0 -->
												<table border="1" class="schoolEventstable marginBottom30">
													<tr class="border-bottom">
														<th style="width:300px">Week</th>
														<th>Day</th>
														<th></th>
													</tr>
													<tbody data-bind="template:{name:'dayException-template', templatePrefix: 'schedule/', foreach:weekExceptions}"></tbody>
													<tr class="lastheader">
														<td colspan="3"><a href="#." data-bind="click: addExcpetion">Add Exceptions</a></td>
													</tr>
												</table>
												<!-- /ko -->
												<!-- ko if: weekExceptions().length < 1 -->
												<table border="1" class="schoolEventstable marginBottom30">
													<tr class="lastheader">
														<td colspan="3"><a href="#." data-bind="click: addExcpetion">Add Exceptions</a></td>
													</tr>
												</table>
												<!-- /ko -->
												<!-- EO Exceptions +++++++++++++++++++++++++++++++++++++++++++++++ -->
												<label class="lblSchedule"><span>Class Schedule</span><span class="font100"> (</span><span data-bind="text: unutilizedDuration" class="font100">8.00</span><span class="font100"> hours unutilized)</span></label>
												<table border="1" class="schoolEventstable" >
													<tr class="border-bottom">
														<th class="header" >No.</th>
														<th class="header" >Type</th>
														<th class="header" >Duration</th>
														<th>&nbsp;</th>
													</tr>
													<tbody data-bind="template: { name: 'period-template', templatePrefix: 'schedule/', foreach: timeTable}"></tbody>
													<tr class="lastheader">
														<td colspan="4">
														<div class="floatleft">
															<a href="#." data-bind="click: addPeriod">Add Period</a>
														</div></td>
													</tr>
												</table>
											</div>
										</div>
									</div>
									<div class="bottomButton">
										<!--
										1 acceptItem
										Add Schedule Dialog
										-->
										<a href="#" class="te-button buttonBlue floatleft" id="saveInfo2" data-bind="click: $root.acceptItem">Save</a>
										<a href="#" class="te-button buttonGray floatleft" id="cencelBox2" data-bind="click: $root.revertItem">Cancel</a>
										<div class="clearBoth"></div>
									</div>
								</div>
							</div>
							<!--         TAB2 STARTS                  -->
							<div id="tabs-2">
								<div class="scroll-pane2">
									<div class="floatright">
										<!-- ko if: hasSchedules() && isEditMode-->
										<a href="#." class="te-button buttonFacilities" data-bind="click: addShiftTimingsModel">Create Shift</a>
										<!-- /ko -->
									</div>
									<div class="clearBoth"></div>
									<table data-bind="style: { visibility: shiftArr().length ? 'visible' : 'hidden' }" border="1" class="schoolEventstable marginTop">
										<!-- ko if: hasSchedules() -->
										<thead>
											<tr class="border-bottom">
												<th class="header" style="width:120px;" >Name</th>
												<th class="header" style="width:210px;">Schedule</th>
												<th class="header" style="width:300px;">Classes</th>
												<th class="header" style="width:60px;"></th>
											</tr>
										</thead>
										<!-- /ko -->
									</table>
									<div data-bind="foreach: shiftArr">
										<!-- ko if: shiftTitle() != "" -->
										<table border="1" class="schoolEventstable ">
											<tr>
												<td style="width:120px;"><strong  data-bind="text:shiftTitle" >Morning Shift</strong></td>
												<td style="width:210px;"><!-- ko foreach: schedules --><!-- ko if: isMapped() == "1" --><span class="displayBlock"><strong data-bind="text:scheduleTitle">Full Day</strong> (<span data-bind="text:timeTable.periodCount">8</span> periods, <span data-bind="text:timeTable.breakCount">8</span> breaks)</span><span data-bind="text:startTiming">8:00AM - 3:00PM (Mon - Fri)</span> - <span  data-bind="text:endTiming">8:00AM - 3:00PM (Mon - Fri)</span>&nbsp;<span data-bind="foreach:daysOfWeek"><span data-bind="text:day">(Mon - Fri)</span> </span>
												<hr class="borderBottom marginBottom marginTop" />
												<!-- /ko --><!-- /ko --></td>
												<td style="width:300px;"><!-- ko foreach: grades --><span class="displayBlock"> <!-- ko if: gradeTitle.isMapped()  == "1" --><strong data-bind="text:gradeTitle">Playgroup </strong>&nbsp;(<!-- /ko --> <!-- ko foreach: divisions --><!-- ko if: isMapped() == "1" --> <span data-bind="text:divisionTitle"></span>&nbsp; <!-- /ko --><!-- /ko --><!-- ko if: gradeTitle.isMapped()  == "1" -->)<!-- /ko --></span><!-- /ko --></td>
												<td style="width:60px;"><!-- ko if: isEditMode--><a href="#" title ="Edit" class="editIcon floatleft" style="display:block" data-bind="click:$root.openShiftTimingsForEditing"></a><a href="#" title ="Delete"  class="deleteIcon floatleft" style="display:block" data-bind="click:$root.openDeleteShiftTimingsDialog"></a><!-- /ko --></td>
											</tr>
											<!-- /ko -->
										</table>
										<!-- /ko -->
									</div>
									<div class="tabContentExistMessage">
										<!-- <strong  data-bind="text:hasSchedules()">Morning Shift</strong> -->
										<!-- ko ifnot: hasSchedules() -->
										<p >
											No School timing defined. To define timings, click on the Timings tab.
										</p>
										<!-- /ko -->
										<!-- ko if: shiftArr().length <1 && isEditMode-->
										<p >
											No Shifts created. To create shift, click on the Create Shift Button.
										</p>
										<!-- /ko -->
									</div>
								</div>
								<!-- DELETE CONFORM FOR TAB 2 START-->
								<div id="dialog-confirmShiftDelete" data-bind="dialog: { modal : 'true', 'autoOpen': false }, dialogVisible: isOpen" title="Delete">
									<div class="sectionContainer">
										<p>
											Do you want to delete?
										</p>
									</div>
									<div class="bottomButton">
										<a href="#" class="te-button buttonBlue floatleft" id="delete" data-bind="click:deleteShiftTimings">Delete</a>
										<a href="#" class="te-button buttonGray floatleft" id="cencel" data-bind="click:cancelDeleteDialog">Cancel</a>
										<div class="clearBoth"></div>
									</div>
								</div>
								<!-- DELETE CONFORM FOR TAB 2 ENDS-->
								<!--         TAB2 EDIT DIALOG START                  -->
								<div id="create-Shift" class="crShift" data-bind="dialog: {width:'635', modal : 'true', 'autoOpen': false, 'title': ShiftDialogTitle }, dialogVisible: isOpen">
									<div class="sectionContainer scroll-pane">
										<div data-bind="foreach: itemForEditing">
											<h2 class="title2">Name your shift</h2>
											<input type="text" class="width360 marginBottom" placeholder="Type Here..." data-bind="value:shiftTitle, valueUpdate: 'afterkeydown'"/>

											<h2 class="title2">Schedules</h2>
											<!-- ko foreach: schedules -->
											<div class="floatleft width227 marginRight marginBottom">
												<!-- <input type="checkbox" name="" id="" class="styled" /> -->
												<div class="floatleft">
													<input type="checkbox" name="" id="" data-bind="uniqueId:scheduleTitle, checked: scheduleTitle.isSelected" class="css-checkbox"  />
													<label data-bind="uniqueFor: scheduleTitle" class="css-label"></label>
												</div>
												<div></div>
												<div style="margin-left: 5px;margin-top: 2px;" class="floatleft">
													<span class="displayBlock"> <strong data-bind="text:scheduleTitle">Full Day</strong> (<span data-bind="text:timeTable.periodCount">8 periods</span> periods,<span data-bind="text:timeTable.breakCount">8 breaks</span> breaks) <span class="displayBlock bold gray"> <span data-bind="text:startTiming" >8:00AM - 4:00PM</span> - <span data-bind="text:endTiming" >8:00AM - 4:00PM</span>&nbsp; </span> <span class="displayBlock gray" data-bind="foreach:daysOfWeek"> <span data-bind="text:day">(Mon - Fri)</span> <!-- ko if: $index() <  $parent.daysOfWeek().length -1--> <span>,</span> <!-- /ko --> </span>
												</div>
												<div class="clearBoth"></div>
											</div>
											<!-- /ko -->
											<div class="clearBoth"></div>
											<h2 class="title2">Classes</h2>
											<!-- <span class="displayBlock">You can select maximum 4 divisions per class</span> -->
											<ul class="list marginTop">
												<!-- ko foreach: grades -->
												<li>
													<span class="title bold floatleft" data-bind="text:gradeTitle">Playgroup</span>
													<div class="floatleft width350">
														<!-- ko foreach: divisions -->
														<div>
															<!-- <div data-bind="text: classId.isDisabled">classId.isDisabled</div> -->
															<!-- ko if: classId.isDisabled-->
															<input type="checkbox" name="" id="" data-bind="checked: false" class="css-checkbox"  />
															<label style=" cursor: default; background-image: url(/ce-static-testedge/common/images/checkboxNewDisabled.png);" data-bind="text :divisionTitle" class="css-label">Option #1</label>
															<!-- /ko -->
															<!-- ko ifnot: classId.isDisabled-->
															<input type="checkbox" name="" id="" data-bind="uniqueId:divisionTitle, checked: divisionTitle.isSelected" class="css-checkbox"  />
															<label  data-bind="uniqueFor: divisionTitle, text :divisionTitle" class="css-label">Option #1</label>
															<!-- /ko -->
														</div>
														<!-- /ko -->
													</div>
													<div class="clearBoth"></div>
												</li>
												<!-- /ko -->
											</ul>
											<div class="clearBoth"></div>
										</div>
									</div>
									<div class="bottomButton">
										<a href="#" class="te-button buttonBlue floatleft" id="save" data-bind="click:$root.saveShiftTimingsModel">Save</a>
										<a href="#" class="te-button buttonGray floatleft" id="cencel" data-bind="click:closeShiftDialog">Cancel</a>
										<div class="clearBoth"></div>
									</div>
								</div>
								<!--         TAB2 EDIT DIALOG ENDS                  -->
								<div id="dialog-Errors-Tab2" data-bind="dialog: {width:'300', modal : 'true', 'autoOpen': false, 'title': errorTitle }, dialogVisible: isErrorDialogOpen" title="">
									<div class="sectionContainer">
										<p data-bind="text: errorDesc" align="middle">
											Some Fields are not yet filled!
										</p>
									</div>
									<div class="bottomButton">
										<a data-bind="click: closeErrorDialog" href="#" class="te-button buttonBlue floatleft">Close</a>
										<div class="clearBoth"></div>
									</div>
								</div>
							</div>
							<!--         TAB2 ENDS                  -->
							<!-- tabs-3 Prasanna edit -->
							<div id="tabs-3">
								<div class="scroll-pane2">
									<div class="floatright">
										<!-- ko if: isEditMode -->
										<a data-bind='click: $root.addTermItem' href="#" class="te-button buttonFacilities addTerm">Add Term</a>
										<!-- /ko -->
									</div>
									<div class="tabContentExistMessage">
										<!-- ko if: termVOarr().length <1 && isEditMode-->
										<p >
											No Terms added. To Add Term, click on the Add Term Button.
										</p>
										<!-- /ko -->
									</div>
									<div class="clearBoth"></div>
									<div id="myAccordion4" data-bind="foreach: termVOarr, accordion: {updateOn: termVOarr(), options: { active: false, collapsible: true, heightStyle: 'content' }}">
										<h3 class="floor"><span class="bold floatleft marginRight" data-bind="text: termTitle">Term 1</span><span data-bind="text: startDate.totalDate" class="gray floatleft">1 Jun 2012 - 31 Oct 2012 </span><!-- ko if: isEditMode --><a  href="#" data-bind='click: $root.deleteClick' class="deleteIconTitle floatright" style="display:block"></a><a href="#" data-bind='click: $root.selectItem' class="editIcon floatright"></a><!-- /ko --></h3>
										<div class="gradeData">
											<table border="1" class="schoolEventstable">
												<thead>
													<tr class="border-bottom">
														<th class="header" style="width:130px;">Name</th>
														<th class="header" style="width:130px;">Type</th>
														<th class="header" style="width:130px;">Start Date</th>
														<th class="header" style="width:130px;">End Date</th>
														<th class="header" style="width:130px;">Weightage (%)</th>
													</tr>
												</thead>
												<tbody data-bind="foreach: {data:assessments}">
													<tr>
														<td data-bind="text: assessmentTitle" >L FA1</td>
														<!-- ko if: assessmentType != 2 &&  assessmentType != 1-->
														<td data-bind="text: assessmentType() == 2 ? 'Summative' : 'Formative'">Formative</td>
														<!-- /ko -->
														<!-- ko if: assessmentType == 2 ||  assessmentType == 1-->
														<td data-bind="text: assessmentType == 2 ? 'Summative' : 'Formative'">Formative</td>
														<!-- /ko -->
														<td><span data-bind="text: startDateDisplay"></span></td>
														<td><span data-bind="text: endDateDisplay"></span></td>
														<td data-bind="text: weightage">10%</td>
													</tr>
												</tbody>
											</table>
										</div>
										<!-- EO myAccordion4 444444444444444444444444444444444444444444444444444444 -->
									</div>
								</div>
								<!-- ko if: totalWeightage() < 100 -->
								<div class="footer-message" >
									Total Weightage is less than 100 <!-- : <span data-bind="text: totalWeightage">totalWeightage</span> -->
								</div>
								<!-- /ko -->
								<div id="add-TermX" data-bind="dialog: {width:'880', modal : 'true', 'autoOpen': false, 'title': mytitle }, dialogVisible: isOpen" title="Define Term">
									<div class="scroll-pane">
										<div data-bind="template: { name: 'itemTermEditing-template', templatePrefix: 'terms/' , foreach: itemForEditing }" class="sectionContainer"></div>
									</div>
									<div class="bottomButton">
										<!-- add-Term 2 acceptItem-->
										<a href="#" data-bind="click: $root.acceptItem" class="te-button buttonBlue floatleft" id="saveInfo">Save</a>
										<a href="#" data-bind="click: $root.revertItem" class="te-button buttonGray floatleft" id="cencelBox">Cancel</a>
										<div class="clearBoth"></div>
									</div>
								</div>
								<div id="dialog-Errors-Tab3" data-bind="dialog: {width:'300', modal : 'true', 'autoOpen': false, 'title': errorTitle }, dialogVisible: isErrorDialogOpen" title="">
									<div class="sectionContainer">
										<p data-bind="text: errorDesc" align="middle">
											Some Fields are not yet filled!
										</p>
									</div>
									<div class="bottomButton">
										<a data-bind="click: closeErrorDialog" href="#" class="te-button buttonBlue floatleft">Close</a>
										<div class="clearBoth"></div>
									</div>
								</div>
							</div>
							<div id="tabs-4">
								<div class="scroll-pane2">
									<table border="1" class="schoolEventstable">
										<thead>
											<tr class="border-bottom">
												<th class="header" style="width:70px;">Grade</th>
												<th class="header" style="width:120px;">Core Subjects</th>
												<th class="header" style="width:160px;">Optional Subjects</th>
												<th class="header" style="width:160px;">Co-Scholastic</th>
												<th class="header" style="width:160px;">Co-Curricular</th>
												<th class="header" style="width:40px;"></th>
											</tr>
										</thead>
										<tbody data-bind="foreach: {data:GradesVOarr}">
											<tr>
												<td data-bind="text: gradeTitle">Grade 1</td>
												<!-- ko ifnot: coreSubjects -->
												<td><a href="#" data-bind='click: $root.selectItem' class="subjects">Define</a></td>
												<!-- /ko -->
												<!-- ko if: coreSubjects -->
												<td data-bind="text: coreSubjects"></td>
												<!-- /ko -->
												<td data-bind="text: optionalSubjects">Hindi II, Hindi III, English II</td>
												<td data-bind="text: coScholastics">Life Skills, Work Education, Visual &amp; Performing Arts</td>
												<td data-bind="text: coCurriculars">Co-Curricular</td>
												<td><!-- ko if: coreSubjects && isEditMode --><a data-bind='click: $parent.selectItem' href="#" title ="Edit" class="editIcon floatleft" style="display:block"></a><!-- /ko --><!-- ko ifnot: coreSubjects && isEditMode --><a data-bind='click: $parent.selectItem' href="#" title ="View" style="display:block">View</a><!-- /ko --></td>
											</tr>
										</tbody>
									</table>
								</div>
								<div id="importPopupOpen" data-bind="dialog: {width:'250', modal : 'true', 'autoOpen': false }, dialogVisible: isImportPopupOpen" title="Import Subjects">
									<div class="scroll-pane4">
										<div class="padding10">
											<span class="marginBottom displayBlock">Select a Grade to import Subjects</span>
											<span> <select data-bind="options: $root.mappedGradesVOarr,optionsText: 'gradeTitle',
												optionsValue: 'ceGradeId',
												value: mappedGradeID, event: {change: onMappedGradeChange.bind($data,mappedGradeID())}, optionsCaption: 'Choose...'"></select> </span>
										</div>
									</div>
									<div class="bottomButton">
										<a data-bind="click: onImportGradeAccept" href="#" class="te-button buttonBlue floatleft" id="saveInfo">Ok</a>
										<a data-bind="click: closeImportPopup" href="#" class="te-button buttonGray floatleft" id="cencelBox">Cancel</a>
										<div class="clearBoth"></div>
									</div>
								</div>
								<!-- BO Dialog -->
								<div id="dialog-define" data-bind="dialog: {width:'898', modal : 'true', 'autoOpen': false, 'title': mytitle }, dialogVisible: isOpen" title="Subjects for Grade 1">
									<div id="tabAYP1">
										<span data-bind="with: itemForEditing()">
											<div class="floatright">
												<!-- ko if: $root.selectedTabID() == 'tabs-1' && $root.isEditMode() -->
												<a id="subjectImportButton" data-bind="click: $root.openImportPopup" href="#" class="te-button buttonGray floatleft" id="cencelBox">Import Subjects</a>
												<!-- /ko -->
											</div> <!-- show import button only if: SubjectVOarr().length > 0 --> <!-- ko if: SubjectVOarr().length > 0 --> <!-- /ko --> </span>
										<ul>
											<li class="ui-tabs-active" id="tab_title">
												<a href="#tabs-1">Scholastic</a>
											</li>
											<li>
												<a href="#tabs-2">Co-Scholastic</a>
											</li>
											<li>
												<a href="#tabs-3">Co-Curricular</a>
											</li>
										</ul>
										<div></div>
										<div id="tabs-1">
											<div  class="scroll-pane subjectScholastic">
												<div data-bind="template: { name: 'defineScholastic-template',templatePrefix: 'subjects/', foreach: itemForEditing, afterRender: afterDefineScholasticRender}"></div>
											</div>
										</div>
										<div id="tabs-2">
											<!-- ko if: GradesVOarr.hasCoScholastic() == false -->
											<div class="caution-message">
												Has No CoScholastic to Display
											</div>
											<!-- /ko -->
											<div class="scroll-pane subjectCoScholastic" data-bind="style: { visibility: GradesVOarr.hasCoScholastic() == true ? 'visible' : 'hidden' }">

												<div data-bind="with: itemForEditing">
													<div id="myContainer">
														<div data-bind="foreach: SubjectCoSchoVOarr">
															<div id="row">
																<div id="parentGap"></div>
																<div id="leftCoScho">
																	<!-- Tab 2 Co Scholastics -->
																	<!-- ko if: childs().length < 0-->
																	<!--subjectCoScholastic checkBox 1-->

																	<input data-bind="uniqueId: coschTitle, NumChecked: isMapped, checked: isMapped,event: {change: onParentCheckClick}"  class="css-checkboxSubjects" type="checkbox" />
																	<label data-bind="uniqueFor: coschTitle, text :coschTitle" class="css-labelSubjects">Option #1</label>
																	<!-- /ko -->
																	<!-- ko if: childs().length >= 0-->
																	<label data-bind="uniqueFor: coschTitle, text :coschTitle" class="css-labelSubjectsHeader">Option #1</label>
																	<!-- /ko -->

																</div>
																<div id="middleCoScho"></div>
															</div>
															<div id="row">
																<div id="dashLineTD"></div>
																<div id="dashLineCheckTDCoSchoParent"></div>
															</div>
															<div class="cleaner">
																&nbsp;
															</div>
															<div data-bind="foreach: childs">
																<div id="row">
																	<div id="childGap"></div>
																	<div id="leftChildCoScho">
																		<!-- NumChecked: isMapped, checked: isMapped -->
																		<!-- subjectCoScholastic checkBox 2 -->
																		<input data-bind="uniqueId: coschTitle, NumChecked: isMapped, checked: isMapped"  class="css-checkboxSubjects" type="checkbox" />
																		<label data-bind="uniqueFor: coschTitle, text :coschTitle" class="css-labelSubjects">Option #1</label>
																	</div>
																	<div id="middleCoScho"></div>
																</div>
																<div id="row">
																	<div id="dashLineBottomTD"></div>
																	<div id="dashLineCheckTDCoScho"></div>
																	<div id="dashLineTD"></div>
																</div>
																<div class="cleaner">
																	&nbsp;
																</div>
															</div>
														</div>

													</div>
												</div>
											</div>
										</div>
										<div id="tabs-3">
											<!-- ko if: GradesVOarr.hasCoCurr() == false -->
											<div class="caution-message">
												No CoCurriculars to Display
											</div>
											<!-- /ko -->
											<div class="scroll-pane subjectCoScholastic disabledSelect" data-bind="style: { visibility: GradesVOarr.hasCoCurr() == true ? 'visible' : 'hidden' }">
												<div  data-bind="with: itemForEditing">
													<div id="myContainer">
														<div data-bind="foreach: SubjectCoCurrVOarr">
															<div id="row">
																<div id="parentGap"></div>
																<div id="left">
																	<!-- Tab 3 Co Curricular TODO: Reverse the Logic Need to Discuss with Arijit for the logic
																	Just disable the Logic to display CheckBox -->
																	<!-- ko if: childs().length < 0-->
																	<!--SubjectCoCurrVOarr checkBox 3-->
																	<input data-bind="uniqueId: coschTitle, NumChecked: isMapped, checked: isMapped,event: {change: onParentCheckClick}"  class="css-checkboxSubjects" type="checkbox" />
																	<label data-bind="uniqueFor: coschTitle, text :coschTitle" class="css-labelSubjects">Option #1</label>
																	<!-- /ko -->
																	<!-- ko if: childs().length >= 0-->
																	<label data-bind="uniqueFor: coschTitle, text :coschTitle" class="css-labelSubjectsHeader">Option #1</label>
																	<!-- /ko -->
																</div>
																<div id="middle"></div>
																<div id="right">
																	<!-- ko if: childs().length == 0-->
																	<select data-bind=" options: $root.myOptions, optionsText: 'name', optionsValue: 'id', value: isOptional"></select>
																	<!-- /ko -->
																</div>
															</div>
															<div id="row">
																<div id="dashLineTD"></div>
																<div id="dashLineTD"></div>
																<div id="dashLineTD"></div>
																<div id="dashLineTD"></div>
															</div>
															<div class="cleaner">
																&nbsp;
															</div>
															<div data-bind="foreach: childs">
																<div id="row">
																	<div id="childGap"></div>
																	<div id="leftChild">
																		<!-- NumChecked: isMapped, checked: isMapped Tab CoCurr-->
																		<!--SubjectCoCurrVOarr checkBox 4-->
																		<input data-bind="uniqueId: coschTitle, NumChecked: isMapped, checked: isMapped,event: {change: $parent.onCheckClick(isMapped())}"  class="css-checkboxSubjects" type="checkbox" />
																		<label data-bind="uniqueFor: coschTitle, text :coschTitle" class="css-labelSubjects">Option #1</label>
																	</div>
																	<div id="middle"></div>
																	<div id="right">
																		<span> <select data-bind=" options: $root.myOptions, optionsText: 'name', optionsValue: 'id', value: isOptional,event: {change: $parent.onIsOptionalChange}"></select> </span>
																	</div>
																</div>
																<div id="row">
																	<div id="dashLineBottomTD"></div>
																	<div id="dashLineCheckTD"></div>
																	<div id="dashLineTD"></div>
																	<div id="dashLineTD"></div>
																</div>
																<div class="cleaner">
																	&nbsp;
																</div>
															</div>
															<!-- ko if: isOptional.showMessage() -->
															<!-- <div class="footer-message" >
															More than 1 optional
															</div> -->
															<!-- /ko -->
														</div>
													</div>
												</div>
											</div>
										</div>
									</div>
									<div class="bottomButton">
										<!-- Subjects dialog-define 3 acceptItemSubjects-->
										<!-- ko if: $root.isEditMode() -->
										<a data-bind="click: $root.acceptItemSubjects" href="#" class="te-button buttonBlue floatleft" id="saveInfo">Save</a>
										<!-- /ko -->
										<a data-bind="click: $root.revertItem" href="#" class="te-button buttonGray floatleft" id="cencelBox">Cancel</a>
										<div class="clearBoth"></div>
									</div>
								</div>
							</div>
							<div id="tabs-5">
								<div class="scroll-pane2">

									<div class="floatright">
										<!-- ko if: ShiftVOarr().length > 0-->
										<span class="floatleft displayBlock lineHeight24"><a data-bind="event: { click: $root.viewTeacherUtilization}" href="#." class="seletcs">View Teachers Utilization</a></span>
										<span class="floatleft displayBlock lineHeight24">&nbsp;&nbsp; | &nbsp;&nbsp; </span>
										<span class="floatleft displayBlock lineHeight24">Shift :</span>
										<div id="shifts" class="floatleft">
											<div id="rad_buttons"  data-bind="foreach: ShiftVOarr">
												<span data-bind="text:shiftTitle,click:$root.shiftClick, id:shiftId"> Radio 1 </span>
											</div>
										</div>
										<!-- /ko -->
									</div>
									<table data-bind="style: { border: ShiftVOarr().length > 0 ? '1' : '0' }" border="1" class="schoolEventstable">
										<!-- ko if: ShiftVOarr().length > 0 -->
										<tr class="border-bottom">
											<th class="header" style="width: 60px;">Grade</th>
											<th class="header" style="width: 1px;">Division</th>
											<th class="header" style="width: 250px;">Room Number</th>
											<th class="header" style="width: 200px;">Class Teacher</th>
											<th class="header" style="width: 160px;">Subject Teachers</th>
										</tr>
										<tbody data-bind="foreach: ClassRoomVOarr">
											<tr>
												<td data-bind="text: gradeTitle">Playgroup</td>
												<td data-bind="text: divisionTitle">Coral</td>
												<td data-bind="text: teacherId.rootRoomDesc">Room No</td>
												<td data-bind="text: teacherId.classTeacherName">Teacher Name</td>
												<!-- TODO:Red CSS -->
												<td><!-- ko if: teacherId.allTeachersIdPresent() == -1 --><span style="color: #F4716B" class="floatleft displayBlock spacing">Teachers not Assigned</span><!-- /ko --><!-- ko if: teacherId.allTeachersIdPresent() == 1 --><span class="floatleft displayBlock spacing">All Teachers Assigned</span><!-- /ko --><!-- ko if: teacherId.allTeachersIdPresent() == 0 --><span class="floatleft displayBlock spacing">No Subject Assigned</span><!-- /ko --><!-- ko if: $root.isTeacherEditMode() --><a data-bind="click: $root.selectItemAssign" href="#" title="Edit" class="editIcon floatleft" style="display:block"></a><!-- /ko --><!-- $root.isTeacherEditMode(): <span data-bind="text: $root.isTeacherEditMode()"></span>
												teacherId.allTeachersIdPresent(): <span data-bind="text: teacherId.allTeachersIdPresent()"></span> --><!-- ko ifnot: $root.isTeacherEditMode()--><a data-bind="click: $root.selectItemAssign" href="#" title="View" style="display:block">View</a><!-- /ko --></td>
											</tr>
										</tbody>
										<!-- /ko -->
									</table>
									<div class="tabContentExistMessage">
										<!-- ko if: ShiftVOarr().length < 1-->
										<p >
											Subjects for the grades are yet not defined. To define the subjects, click on the Subject tab.
											<br>
											Or
											<br>
											Shifts are not Created yet.
										</p>
										<!-- /ko -->
									</div>
								</div>
								<!-- BO subject dialog box -->
								<div class="assignSubject" id="assign-Subject" data-bind="dialog: {width:'910', modal : 'true', 'autoOpen': false, 'title': mytitle }, dialogVisible: isOpen" title="x Assign">
									<div class="scroll-pane20">
										<div data-bind="with: itemForEditingClassRoomVO" class="sectionContainer disabledSelect">
											<!-- <label data-bind="text: gradeTitle">gradeTitle</label> -->
											<table border="1" class="schoolEventstable ui-widget">
												<tr>
													<td>
													<div>
														<span class="lineHeight24 bold">Room Number</span>
														<span>&nbsp;&nbsp;</span>
														<!--If teacher edit mode then only show the editable fields enable else disable-->
														<!-- ko if: $root.isTeacherEditMode() -->
														<span> <span data-bind="text: teacherId.rootRoomDesc"></span> &nbsp;&nbsp; <!-- ko if: teacherId.rootRoomDesc().length > 0 --> <a data-bind="event: { click: $root.selectItemClassRoom}"  href="#." class="seletcs">Change</a> <!-- /ko --> <!-- ko ifnot: teacherId.rootRoomDesc().length > 0 --> <a data-bind="event: { click: $root.selectItemClassRoom}"  href="#." class="seletcs">Select</a> <!-- /ko --> </span>
														<!-- /ko -->
														<!-- ko ifnot: $root.isTeacherEditMode() -->
														<span data-bind="text: teacherId.rootRoomDesc"></span>
														<!-- /ko -->
														<span></span>
													</div></td>
												</tr>
												<tr>
													<td >
													<div>
														<span class="lineHeight24 bold">Class Teacher</span>
														<!-- <span>$root.isTeacherEditMode() :: </span>
														<span data-bind="text: $root.isTeacherEditMode()">$root.isTeacherEditMode()</span> -->
														<span>&nbsp;&nbsp;</span>
														<span> <select data-bind="options: $root.availableClassTeachers,optionsText: 'fullName',
															optionsValue: 'userId',
															value: teacherId, enable: $root.isTeacherEditMode(), optionsCaption: 'Choose...'"></select> </span>
													</div></td>
												</tr>
											</table>
											<span>
												<div>
													<span> <h2 class="title2Left">Subject Teachers</h2> </span>
													<!-- ko if: coCurrTeachers().length > 0 -->
													<span> <h2 class="title2Right">CoCurricular Teachers</h2> </span>
													<!-- /ko -->
												</div>
												<table border="1" class="schoolEventstable ui-widget classRoomSubjectTable">
													<tr class="border-bottom">
														<th class="header">Subject</th>
														<th class="header">Teacher</th>
													</tr>
													<tbody data-bind="foreach: subjectTeachers">
														<!-- ko if: subSubjects().length > 0 -->
														<tr>
															<td data-bind="text: subjectTitle" class="lineHeight24 bold">English</td>
															<td><!--<div data-bind="text: teacherId"></div>--><!-- <select data-bind="options: $root.TeachersListVOarr,optionsText: 'fullName',
															optionsValue: 'userId',
															value: teacherId, enable: $root.isTeacherEditMode(), optionsCaption: 'Choose...', event: {change: $parent.onSubSubjectTeacherChange}"> --></td>
														</tr>
														<!-- ko foreach: subSubjects -->
														<tr >
															<td  style="padding-left:25px" data-bind="text: subjectTitle" class="lineHeight24 bold">English</td>
															<td><select data-bind="options: $root.TeachersListVOarr,optionsText: 'fullName',
															optionsValue: 'userId',
															value: teacherId, enable: $root.isTeacherEditMode(), optionsCaption: 'Choose...', event: {change: $parent.onSubSubjectTeacherChange}"></select></td>
														</tr>
														<!-- /ko -->
														<!-- /ko -->
														<!-- ko if: subSubjects().length  == 0 -->
														<tr>
															<td data-bind="text: subjectTitle" class="lineHeight24 bold">English</td>
															<td><select data-bind="options: $root.TeachersListVOarr,optionsText: 'fullName',
															optionsValue: 'userId',
															value: teacherId, enable: $root.isTeacherEditMode(), optionsCaption: 'Choose...'"></select></td>
														</tr>
														<!-- /ko -->
													</tbody>
												</table> <!-- ko if: coCurrTeachers().length > 0 -->
												<table border="1" class="schoolEventstable ui-widget classRoomCoCurrTable">
													<tr class="border-bottom">
														<th class="header">Subject</th>
														<th class="header">Teacher</th>
													</tr>
													<tbody data-bind="foreach: coCurrTeachers">
														<!-- ko if: subSubjects().length > 0 -->
														<tr>
															<td data-bind="text: subjectTitle" class="lineHeight24 bold">English</td>
															<td></td>
														</tr>
														<!-- ko foreach: subSubjects -->
														<tr >
															<td  style="padding-left:25px" data-bind="text: subjectTitle" class="lineHeight24 bold">English</td>
															<td><select data-bind="options: $root.TeachersListVOarr,optionsText: 'fullName',
															optionsValue: 'userId',
															value: teacherId, enable: $root.isTeacherEditMode(), optionsCaption: 'Choose...', event: {change: $parent.onSubSubjectTeacherChange}"></select></td>
														</tr>
														<!-- /ko --><!-- /ko --><!-- ko if: subSubjects().length  == 0 -->
														<tr>
															<td data-bind="text: subjectTitle" class="lineHeight24 bold">English</td>
															<td><select data-bind="options: $root.TeachersListVOarr,optionsText: 'fullName',
															optionsValue: 'userId',
															value: teacherId, enable: $root.isTeacherEditMode(), optionsCaption: 'Choose...'"></select></td>
														</tr>
														<!-- /ko -->
													</tbody>
												</table><!-- /ko --> </span>
										</div>
									</div>
									<div class="bottomButton">
										<!-- ko if: isTeacherEditMode -->
										<a data-bind="click: $root.acceptItemClassRoomTeacher" href="#" class="te-button buttonBlue floatleft" id="saveInfo">Save</a>
										<!-- /ko -->
										<a data-bind="click: $root.revertItem" href="#" class="te-button buttonGray floatleft" id="cencelBox">Cancel</a>
										<div class="clearBoth"></div>
									</div>
								</div>
								<div id="assign-Infra" data-bind="dialog: {width:'500', modal : 'true', 'autoOpen': false, 'title': 'Select a classroom' }, dialogVisible: isInfraOpen" title="Select a classroom">
									<div  class="classroomBox">
										<div class="scroll-pane">
											<div>
												<select class="select width123 floatleft marginRight" data-bind='options: RoomInfraVOarr, optionsText: "title",  value: myCurrentBuilding'></select>
											</div>
											<div data-bind="with: myCurrentBuilding">
												<select class="select width123 floatleft" data-bind='options: childs, optionsText: "title", optionsCaption: "Choose...", value: $parent.myCurrentFloor, event: {change: $parent.onComboChange}'></select>
											</div>
											<div class="clearBoth"></div>
											<div class='price' data-bind='with: myCurrentFloor'>
												<!-- TODO: Style to be centralised -->
												<div data-bind="foreach: childs" class="roomWrap">
													<!-- ko if: infraType() == 2 -->
													<div class="roomBox RoomLab" data-bind="text: title, id: infraId"></div>
													<!-- /ko -->
													<!-- ko if: selectedRoomInfraId() == infraId() -->
													<div class="roomBox RoomCurrent" data-bind="text: title, id: infraId"></div>
													<!-- /ko -->
													<!-- ko ifnot: selectedRoomInfraId() == infraId() -->
													<div class="roomBox" data-bind="click: $root.onRoomClick, text: title, id: infraId"></div>
													<!-- /ko -->
												</div>
											</div>
										</div>
									</div>
									<div class="bottomButton">
										<a href="#" data-bind="click: $root.RevertRoomSelection" class="te-button buttonBlue floatleft" id="saveInfo">Close</a>
									</div>
								</div>
								<!-- save dialog -->
								<div id="dialog-confirmSaveTeachers" data-bind="dialog: {width:'300', modal : 'true', 'autoOpen': false, 'title': 'All Teachers not Assigned' }, dialogVisible: isSaveDialogOpen" title="">
									<div class="sectionContainer">
										<p>
											<!-- Some teachers are not Assigned which are in Red, do you want to still save! -->
											Please assign teachers to all Subjects.
										</p>
									</div>
									<div class="bottomButton">
										<a data-bind="click: closeSaveDialog" href="#" class="te-button buttonBlue floatleft">OK</a>
										<div class="clearBoth"></div>
									</div>
								</div>
								<div id="dialog-confirmShiftChange" data-bind="dialog: {width:'420', modal : 'true', 'autoOpen': false, 'title': $root.myShiftTitle }, dialogVisible: isShiftChangeOpen" title="myShiftTitle">
									<div class="sectionContainer">
										<p>
											Are you sure you want to change Shift
										</p>
									</div>
									<div class="bottomButton">
										<a data-bind="click:  $root.changeShiftRoot" href="" class="te-button buttonBlue floatleft" id="saveInfo">Yes</a>
										<a data-bind="click: $root.revertShiftChange" href="" class="te-button buttonGray floatleft" id="cencelBox">No</a>
										<div class="clearBoth"></div>
									</div>
								</div>
								<div id="dialog-Errors-Tab5" data-bind="dialog: {width:'300', modal : 'true', 'autoOpen': false, 'title': errorTitle }, dialogVisible: isErrorDialogOpen" title="">
									<div class="sectionContainer">
										<p data-bind="text: errorDesc" align="middle">
											Some Fields are not yet filled!
										</p>
									</div>
									<div class="bottomButton">
										<a data-bind="click: closeErrorDialog" href="#" class="te-button buttonBlue floatleft">Close</a>
										<div class="clearBoth"></div>
									</div>
								</div>

								<div id="dialog-viewTeacherUtilization" data-bind="dialog: {width:'930', modal : 'true', 'autoOpen': false, 'title': errorTitle }, dialogVisible: isTeacherUtilizationDialogOpen" title="">
									<div data-bind="with: teacherStaffViewModel()">
										<div>
											<div class="titleSection">
												<div class="marginTop">
													<span class="floatleft"><label class="displayBlock bold marginBottom5">Filters:&nbsp;&nbsp;&nbsp;&nbsp;</label></span>
													<span>
														<input type="text" class="width256 floatleft spacing" placeholder="filter text here.." data-bind="value: nameSearch, valueUpdate: 'afterkeydown'" />
													</span>
													<span><label class="bold">Section with Periods: </label></span>
													<!-- maxSectionTotalPeriods : <span data-bind="text: maxSectionTotalPeriods"> maxSectionTotalPeriods </span> -->
													<span data-bind="foreach: SectionPeriodVOArr()"> <span data-bind="text: sectionTitle">e</span> <span>:</span> <!-- ko if: totalperiods() == $parent.maxSectionTotalPeriods() --> <span class="bold redText" data-bind="text: totalperiods">e</span> <!--/ko--> <!-- ko ifnot: totalperiods() == $parent.maxSectionTotalPeriods() --> <span class="bold" data-bind="text: totalperiods">e</span> <!--/ko--> <!-- <span data-bind="text: $index()">e</span>
														<span data-bind="text: $parent.SectionPeriodVOArr().length">e</span>  --> <!-- ko if: $index()+1 < $parent.SectionPeriodVOArr().length --> <span>,</span> <!--/ko--> </span>
												</div>
												<div class="clearBoth"></div>
											</div>
											<!--BO Added Facilities -->
											<div class="containerWhiteAddFaci border-bottom" id="teachingStaff">
												<div class="scroll-pane33">
													<table id="t" cellspacing="0" cellpadding="0" class="tablesorter"  data-bind="triggerUpdate: staffArr">
														<thead>
															<tr class="border-bottom">
																<th ></th>
																<th >Teachers</th>
																<th >Subjects</th>
																<th >Class Teacher</th>
																<th >Contact</th>
																<th >Periods per week</th>
																<th ></th>
															</tr>
														</thead>

														<tbody data-bind="foreach: filteredRecords">
															<tr >
																<td data-bind="text:$index()+1" width="10">Error</td>
																<td  width="140"><span data-bind="text:title"> <a href="#">Error</a></span><span data-bind="text:name"> </td>
																<td data-bind="text:subjectsStr" width="160">Error</td>
																<td  width="80"></span><!-- ko if: isClassTeacher() --><span style="color: orange" data-bind="text:classTitle"> </span><!--/ko--></td>
																<td data-bind="text:contactNumber" width="80">Error</td>

																<!-- ko if: allocationStr() > $parent.maxSectionTotalPeriods() -->
																<td style="color:#FF0000" data-bind="text:allocationStr" width="90">Error</td>
																<!--/ko-->
																<!-- ko ifnot: allocationStr() > $parent.maxSectionTotalPeriods() -->
																<td data-bind="text:allocationStr" width="90">Error</td>
																<!--/ko-->

																<td width="40"><a href="#." class="teacherDtl" data-bind="click:openDetailsDialog">Details</a></td>
															</tr>
														</tbody>
													</table>
												</div>
											</div>

											<!--EO Add Facilities -->

										</div>
										<!--EO Main Content -->

										<!--BO Popup Content -->

										<div data-bind="dialog: {width:'875', modal : 'true', 'autoOpen': false }, dialogVisible: isOpen" title="View Teacher Utilization">
											<div class="scroll-pane">
												<div class="sectionContainer" data-bind="with:currentContent()" >

													<h2 class="title2"  ><span data-bind="text:title"></span><span data-bind="text:name">Mrs. Dipti Aradkar</span></h2>
													<span class="displayBlock marginBottom5" data-bind="text:contactNumber">Contact Number: 9655402221</span>
													<span class="displayBlock marginBottom30" data-bind="text:emailAddress">Email: d.aradkar@wkschool.edu</span>

													<h3 class="marginBottom5">Teaching Details</h3>
													<table id="t" cellspacing="0" cellpadding="0" class="schoolEventstable">
														<thead>
															<tr class="border-bottom">
																<th width="25%">Section</th>
																<th>
																<table>
																	<thead>
																		<tr>
																			<th width="25%">Subjects</th><th width="25%">Classes</th><th width="25%">Periods per week</th>
																		</tr>
																</table><thead></th>
															</tr>
														</thead>
														<tbody>
															<!-- ko foreach: section -->
															<tr>
																<td  data-bind="text:sectionTitle" style="vertical-align:middle" width="25%">Primary</td>
																<td width="75%"><!-- ko foreach: subject -->
																<table width="100%">
																	<tr>
																		<td data-bind="text:subjectTitle" width="33%"></td>
																		<td width="33%"><!-- ko foreach: classDetail --><span data-bind="text:classTitle"></span><!-- /ko --></td>
																		<td width="34%"><span data-bind="text:allocation"></span> periods</td>

																	</tr>
																</table><!-- /ko --></td>
															</tr>
															<!-- /ko -->
														</tbody>
													</table>
												</div>
											</div>
											<div class="bottomButton">
												<a data-bind="click: close" href="#" class="te-button buttonBlue floatleft">Close</a>
												<div class="clearBoth"></div>
											</div>
										</div>
										<!--EO Popup Content -->

										<!-- <div data-bind="template: { name: 'teacherUtilization', templatePrefix: 'classRoomTeachers/', foreach: $data, afterRender: afterTeacherUtilizationRender}"></div> -->
									</div>

									<div class="bottomButton">
										<a data-bind="click: closeTeacherUtilizationDialog" href="#" class="te-button buttonBlue floatleft">Close</a>
										<div class="clearBoth"></div>
									</div>
								</div>

							</div>
							<div id="tabs-6">
								<div class="scroll-pane2">
									<section>
										<div style="display:none" class="scroll-pane32">
											<div data-bind="with: mappedSharedInfraVO">
												<!-- infraIds().length : <span data-bind="text: infraIds().length"></span> -->
												<div data-bind="foreach: infraIds()">
													<span data-bind="text :$index()">$index</span>
													<span data-bind="text :infraId">infraId</span>
												</div>
											</div>
											<div style="float:left; width:100%">
												<!-- availableInfraVOArray().length : <span data-bind="text: availableInfraVOArray().length"></span> -->
												<div style="float:left; width:50%; background-color:#FFff00;">
													<!-- notSharedInfraVOArray :
													<span data-bind="text :notSharedInfraVOArray().length"> notSharedInfraVOArray() </span> -->
													<div data-bind="foreach: notSharedInfraVOArray()">
														<div>
															<span data-bind="text :$index"> $index </span> : <span data-bind="text :infraId"> infraId </span>
														</div>
													</div>
												</div>
												<div style="float:left; width:50%; background-color:#00ff00;">
													<!-- mySharedInfraVOArray:
													<span data-bind="text :mySharedInfraVOArray().length"> mySharedInfraVOArray() </span> -->
													<div data-bind="foreach: mySharedInfraVOArray()">
														<div>
															<span data-bind="text :$index"> $index </span> : <span data-bind="text :infraId"> infraId </span>
														</div>
													</div>
												</div>
											</div>
										</div>
										<section>
											<div class="clearBoth marginBottom"></div>
											<div class="floatleft ">
												<div class="width256  floatleft displayBlock marginBottom">
													<label class="bold marginBottom marginTop displayBlock">Assign Shared CE Rooms</label>

													<select class="select floatleft marginBottom width123" data-bind="options: notSharedInfraVOArray, optionsText: 'title', value:selectedInfraVO, event: {change: onComboChange}, optionsCaption: 'Choose...'">
														<option>Select All</option>
														<option>LKG</option>
														<option>UKG</option>
													</select>

												</div>
												<div class="borderLeft floatleft padding20 width600 min-height150">
													<label class="bold marginBottom marginTop displayBlock">Shared CE Rooms for the Section</label>
													<!-- ko foreach: mySharedInfraVOArray -->
													<div class="selectBlock gradeIndexSelectBlock">
														<span data-bind="text:title" style="margin-right: 10px"></span><a href="#." class="crossIcon classCrossIcon floatright" data-bind="click:$root.removeRoom"></a>
													</div>
													<!-- /ko -->
												</div>
											</div>
										</section>
										<div class="clearBoth"></div>
										<div id="saveRooms" class="bottomButton">
											<!-- ko if: isReadyForSave() -->
											<a data-bind="click: saveSharedRoomData" href="#" class="te-button buttonBlue floatleft">Save</a>
											<span class="redText"> * Changes not Saved</span>
											<!-- /ko -->
											<!-- ko ifnot: isReadyForSave() -->
											<a disabled="disabled" href="#" class="te-button buttonGrayDisabledButton floatleft">Save</a>
											<!-- /ko -->
											
											<div class="clearBoth"></div>
										</div>
									</section>
									<div class="clearBoth marginBottom border-bottom"></div>
									<section>
										<div>
											<!-- Section 2 -->
										</div>
									</section>
								</div>

								<!-- <div id="dialog-Errors-Tab6" data-bind="dialog: {width:'300', modal : 'true', 'autoOpen': false, 'title': errorTitle }, dialogVisible: isErrorDialogOpen" title="">
								<div class="sectionContainer">
								<p data-bind="text: errorDesc" align="middle">
								Some Fields are not yet filled!
								</p>
								</div>
								<div class="bottomButton">
								<a data-bind="click: closeErrorDialog" href="#" class="te-button buttonBlue floatleft">Close</a>
								<div class="clearBoth"></div>
								</div>
								</div> -->

								<!-- save dialog -->
								<div id="dialog-confirmForSaveRooms" data-bind="dialog: {width:'300', modal : 'true', 'autoOpen': false, 'title': 'All Teachers not Assigned' }, dialogVisible: isSaveDialogOpen" title="">
									<div class="sectionContainer">
										<p>
											Do you want to Save Rooms?
										</p>
									</div>
									<div class="bottomButton">
										<a data-bind="click: closeSaveDialog" href="#" class="te-button buttonBlue floatleft">OK</a>
										<div class="clearBoth"></div>
									</div>
								</div>

								<div id="dialog-confirmSavedRooms" data-bind="dialog: {width:'300', modal : 'true', 'autoOpen': false, 'title': myTitle }, dialogVisible: isSavedConfirmDialogOpen" title="">
									<div class="sectionContainer">
										<span data-bind="html: myDesc"> Rooms Saved Successfully </span>
									</div>
									<div class="bottomButton">
										<a data-bind="click: closeSavedConfirmDialog" href="#" class="te-button buttonBlue floatleft">OK</a>
										<div class="clearBoth"></div>
									</div>
								</div>

							</div>
						</div>
					</div>
				</div>
				<!--EO Add Facilities -->
			</div>
		</div>
		</div>
		<!--EO Main Content -->
		<!--BO Popup Content Schedule
		-->
		<!-- dialog-SaveErrorSubjects  for tab 4-->
		<div id="dialog-SaveErrorSubjects" title="Save Error">
			<div class="sectionContainer">
				<p>
					Subjects could not be saved. Some error occured.
				</p>
			</div>
			<div class="bottomButton">
				<a href="#" class="te-button buttonGray floatleft" id="cencel">Close</a>
				<div class="clearBoth"></div>
			</div>
		</div>
		<!-- dialog-JsonIOSaveErrorSubjects  for tab 4-->
		<div id="dialog-JsonIOSaveErrorSubjects" title="Save URL Error">
			<div class="sectionContainer">
				<p>
					Subjects could not be saved. Some error occured.
				</p>
			</div>
			<div class="bottomButton">
				<a href="#" class="te-button buttonGray floatleft" id="cencel">Close</a>
				<div class="clearBoth"></div>
			</div>
		</div>
		<!-- dialog-SaveErrorCoSubjects  for tab 4-->
		<div id="dialog-SaveErrorCoSubjects" title="Save Error">
			<div class="sectionContainer">
				<p>
					Subjects Saved but CoCurricular and CoScholastics could not be saved. Some error occured.
				</p>
			</div>
			<div class="bottomButton">
				<a href="#" class="te-button buttonGray floatleft" id="cencel">Close</a>
				<div class="clearBoth"></div>
			</div>
		</div>

		<!-- dialog-SaveSubjects6  for tab 4-->
		<div id="dialog-SaveSubjects6" title="Terms Marks">
			<div class="sectionContainer">
				<p>
					Terms Marks Should be Greater than 0.
				</p>
			</div>
			<div class="bottomButton">
				<a href="#" class="te-button buttonGray floatleft" id="cencel">OK</a>
				<div class="clearBoth"></div>
			</div>
		</div>

		<!-- dialog-SaveSubjects5  for tab 4-->
		<div id="dialog-SaveSubjects5" title="CoCurricular Optional Subjects">
			<div class="sectionContainer">
				<p>
					Atleast 2 Optional Subjects should be there.
				</p>
			</div>
			<div class="bottomButton">
				<a href="#" class="te-button buttonGray floatleft" id="cencel">OK</a>
				<div class="clearBoth"></div>
			</div>
		</div>

		<!-- dialog-SaveSubjects4  for tab 4-->
		<div id="dialog-SaveSubjects4" title="Multiple Subjects Assign">
			<div class="sectionContainer">
				<p>
					One or more subjects are assigned multiple times.
				</p>
			</div>
			<div class="bottomButton">
				<a href="#" class="te-button buttonGray floatleft" id="cencel">OK</a>
				<div class="clearBoth"></div>
			</div>
		</div>

		<!-- dialog-SaveSubjects3  for tab 4-->
		<div id="dialog-SaveSubjects3" title="Add SubSubject">
			<div class="sectionContainer">
				<p>
					There can not be one SubSubject.
				</p>
			</div>
			<div class="bottomButton">
				<a href="#" class="te-button buttonGray floatleft" id="cencel">OK</a>
				<div class="clearBoth"></div>
			</div>
		</div>

		<!-- dialog-SaveSubjects2  for tab 4-->
		<div id="dialog-SaveSubjects2" title="Add Subject">
			<div class="sectionContainer">
				<p>
					Please add a Scholastic Subject to continue.
				</p>
			</div>
			<div class="bottomButton">
				<a href="#" class="te-button buttonGray floatleft" id="cencel">OK</a>
				<div class="clearBoth"></div>
			</div>
		</div>

		<!-- dialog-SaveSubjects1  for tab 4-->
		<div id="dialog-SaveSubjects1" title="Continue Save">
			<div class="sectionContainer">
				<p>
					You have not checked any Co-Scholastic subjects,
					<br>
					Do you want to still continue to save?
				</p>
			</div>
			<div class="bottomButton">
				<a href="#" class="te-button buttonBlue floatleft" id="delete">Save</a>
				<a href="#" class="te-button buttonGray floatleft" id="cencel">Cancel</a>
				<div class="clearBoth"></div>
			</div>
		</div>

		<div id="dialog-confirmSubjectDelete" title="Delete">
			<div class="sectionContainer">
				<p>
					Do you want to delete?
				</p>
			</div>
			<div class="bottomButton">
				<a href="#" class="te-button buttonBlue floatleft" id="delete">Delete</a>
				<a href="#" class="te-button buttonGray floatleft" id="cencel">Cancel</a>
				<div class="clearBoth"></div>
			</div>
		</div>

		<div id="dialog-confirmAssessmentDelete" title="Delete">
			<div class="sectionContainer">
				<p>
					Do you want to delete?
				</p>
			</div>
			<div class="bottomButton">
				<a href="#" class="te-button buttonBlue floatleft" id="delete">Delete</a>
				<a href="#" class="te-button buttonGray floatleft" id="cencel">Cancel</a>
				<div class="clearBoth"></div>
			</div>
		</div>
		<!--EO Popup Content Schedule-->
		<!--EO Popup Content Schedule-->
		<!-- TODO: Main 2 Term Dates goes here -->
		<!-- Schedules Templates END ------->
		<script>
			// load scripts by assigning a label for them
			head.js({
				jscrollpane : "/ce-static-testedge/common/jscripts/jquery.jscrollpane.min.js"
			}, {
				datecontroller : "/ce-static-testedge/common/jscripts/datecontroller.js"
			}, {
				mousewheel : "/ce-static-testedge/common/jscripts/jquery.mousewheel.js"
			}, {
				globalize : "/ce-static-testedge/common/jscripts/globalize.js"
			}, {
				dateformat : "/ce-static-testedge/common/jscripts/date.format.js"
			}, {
				jqueryloader : "/ce-static-testedge/common/jscripts/jquery.loader.js"
			}, {
				date_min : "/ce-static-testedge/common/jscripts/date.min.js"
			}, {
				culture : "/ce-static-testedge/common/jscripts/globalize.culture.de-DE.js"
			}, {
				jquery_tmpl : "/ce-static-testedge/common/jscripts/jquery.tmpl.1.1.1.js"
			}, {
				aypPlan_common : "/ce-static-testedge/common/jscripts/aypPlan_common.js"
			}, {
				bindingcontroller : "/ce-static-testedge/ayp/jscripts/ayp_subjects_bindingcontroller.js"
			}, {
				assesmentcontroller : "/ce-static-testedge/ayp/jscripts/ayp_sharedRoom.js"
			}, {
				initialcontroller : "/ce-static-testedge/ayp/jscripts/ayp_initialcontroller.js"
			}, {
				scholasticcontroller : "/ce-static-testedge/ayp/jscripts/ayp_subjects_scholasticcontroller.js"
			}, {
				coscholasticcontroller : "/ce-static-testedge/ayp/jscripts/ayp_subjects_coscholasticcontroller.js"
			}, {
				classroomcontroller : "/ce-static-testedge/ayp/jscripts/ayp_classroomcontroller.js"
			}, {
				shifttimings_model : "/ce-static-testedge/ayp/jscripts/ayp_shifttimings_model.js"
			}, {
				shifttimings_ajaxcalls : "/ce-static-testedge/ayp/jscripts/ayp_shifttimings_ajaxcalls.js"
			}, {
				shifttimings : "/ce-static-testedge/ayp/jscripts/ayp_shifttimings.js"
			}, {
				schedulescontroller : "/ce-static-testedge/ayp/jscripts/ayp_schedulescontroller.js"
			}, {
				assesmentcontroller : "/ce-static-testedge/ayp/jscripts/ayp_assesmentcontroller.js"
			}, {
				underscore : "/ce-static-testedge/common/jscripts/underscore-min.js"
			}, {
				ayp_teacherutilization_main_AYPlan : "/ce-static-testedge/ayp/jscripts/ayp_teacherutilization_main_AYPlan.js"
			}, {
				ayp_assement_vo : "/ce-static-testedge/ayp/jscripts/ayp_assement_vo.js"
			}, function() {
				// all done
				console.log("All Done..............................");
			});
		</script>
		<script type='text/javascript' src="/ce-static-testedge/common/jscripts/jquery-1.8.2.min.js"></script>
		<script type='text/javascript' src="/ce-static-testedge/common/jscripts/jquery-ui.js"></script>
		<!-- knockout -->
		<!-- <script type='text/javascript' src="/ce-static-testedge/common/jscripts/knockout-latest.js"></script> -->
		<script type='text/javascript' src="/ce-static-testedge/common/jscripts/knockout-2.2.1.js"></script>
		<script type="text/javascript" src="/ce-static-testedge/common/jscripts/knockout.mapping-latest.js"></script>
		<script type="text/javascript" src="/ce-static-testedge/common/jscripts/knockout.validation.js"></script>
		<script type="text/javascript" src="/ce-static-testedge/common/jscripts/koExternalTemplateEngine_all.js"></script>

		<!-- <script type="text/javascript" src="/ce-static-testedge/common/jscripts/underscore-min.js"></script>
		<script type="text/javascript" src="/ce-static-testedge/ayp/jscripts/ayp_teacherutilization_main_AYPlan.js"></script> -->
	</body>
</html>
